<template>
	<view>
		<view class="image-field-header">
			<text class="title">{{name}}</text>
			<text class="more" @click="getMore">MORE <text class="tn-icon-right"></text></text>
			
		</view>
		
		<view class="productor-field" v-for="(item,index) in productList" :key="index">
			<!-- style="background-image: url('../../static/blue.png')" -->
			<view class="left-image-field" @click="routerToDetail(item)">
				<image class="left-image" :src="item.picture" mode="aspectFill"></image>
				<!-- <text class="description">{{item.description}}</text> -->
				<text class="title">{{item.title}}</text>
			</view>
			<view class="right-image">
				<!-- <view v-for="(rightItem,index) in item.rightImageList" :key="index">
					<image :src="rightItem.picture"   @click="routerToDetail(rightItem)"></image>
				</view> -->
				<image :src="rightItem.picture" mode="aspectFill"  v-for="(rightItem,rightIndex) in item.rightImageList" :key="rightIndex" @click="routerToDetail(rightItem)"></image>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"hotProductAndDemo",
		props:{
			name:String,
			list:{
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				productList:[],
			};
		},
		watch:{
			list:{
				handler(val){
					this.productList = [];
					let len = val.length;
					let bigNum = Math.ceil(len / 3);
					let beforeIndex = 0;
					let count = 0;
					for(let i = 0 ; i < val.length; i ++ ){
						// console.log('1111111111111',this.name,i ,bigNum)
						if(i < bigNum || bigNum <= 1) {
							let data = JSON.parse(JSON.stringify(val[i]));
							this.productList.push(data);
						} else {
							
							if(count == 2){
								beforeIndex ++;
								count = 0;
							}
							count++;
							// console.log('this.productList',this.productList,beforeIndex)
							if(!this.productList[beforeIndex].rightImageList){
								this.$set(this.productList[beforeIndex],'rightImageList',[])
							}
							this.productList[beforeIndex].rightImageList.push(val[i]);
						}
					}
					
				}
			}
		},
		methods:{
			getMore(){
				this.$emit('getMore')
			},
			routerToDetail(item){
				console.log('油酥嘟嘟嘟嘟',item)
				this.$emit('routerToDetail',item)
			}
		}
	}
</script>

<style scoped lang="scss">
	.image-field-header{
		
		height:112rpx;
		padding: 0px 30rpx;
		// display: flex;
		line-height: 112rpx;
		display: flex;
		justify-content: space-between;
		
		.title{
			font-size: 32rpx;
			color: #000000;
			position: relative;
			font-weight: $Semibold ;
			
		}
		.title::after{
			content: '';
			position: absolute;
			left: 66rpx;
			top: 59rpx;
			width: 82rpx;
			height: 26rpx;
			border-radius: 44rpx;
			background-color: #BEE1FE;
			z-index:-10;
			
		}
		.more{
			color: #656475;
			font-size: 20rpx;
			font-weight: $Semibold ;
		}
		
	}
.productor-field{
		padding:20rpx 30rpx;
		display: flex;
		.left-image-field{
			position: relative;
			.left-image{
				
				// background-size: cover;
				// background-position: center;
				border-radius: 20rpx;
				width: 458rpx;
				height: 304rpx;
				
			}
			.description{
				position: absolute;
				left: 40rpx;
				bottom: 82rpx;
				font-size: 24rpx;
				color: #FFFFFF;
			}
			.title{
				position: absolute;
				left: 40rpx;
				bottom: 40rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: $Semibold ;
				
			}
		}
		.right-image{
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			image{
				width: 212rpx;
				height: 142rpx;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
			}
			image:last-child{
				margin-bottom: 0;
			}
		}
	}
	.productor-field:last-child{
		padding-bottom:40rpx;
	}
</style>